<template>
  <view class="date-picker-container">
    <!-- 日期格式选择按钮组 -->
    <view class="date-format-buttons">
      <button @click="changeFormat('date')" :class="currentFormat === 'date' ? 'active' : ''">年月日</button>
      <button @click="changeFormat('month')" :class="currentFormat === 'month' ? 'active' : ''">年月</button>
      <button @click="changeFormat('year')" :class="currentFormat === 'year' ? 'active' : ''">年</button>
      <button @click="changeFormat('datetime')" :class="currentFormat === 'datetime' ? 'active' : ''">年月日时分秒</button>
    </view>

    <!-- 日期范围选择区域 -->
    <view class="date-range-picker">
      <!-- 开始日期选择器 -->
      <picker 
        :mode="pickerMode" 
        :value="startDate" 
        :start="startYear" 
        :end="endYear" 
        :fields="fields"
        @change="(e: any) => handlePickerChange(e, 'start')"
      >
        <uni-easyinput 
          :value="startDate"
          placeholder="请选择开始日期"
          readonly
        ></uni-easyinput>
      </picker>
      
      <text class="range-separator">至</text>
      
      <!-- 结束日期选择器 -->
      <picker 
        :mode="pickerMode" 
        :value="endDate" 
        :start="startYear" 
        :end="endYear" 
        :fields="fields"
        @change="(e: any) => handlePickerChange(e, 'end')"
      >
        <uni-easyinput 
          :value="endDate"
          placeholder="请选择结束日期"
          readonly
        ></uni-easyinput>
      </picker>
    </view>
  </view>
</template>

<script setup lang="ts">
// 导入Vue3核心API：ref(响应式变量)、onMounted(挂载生命周期)、computed(计算属性)
import { ref, onMounted, computed } from 'vue'; 

// 定义日期格式类型：限制只能是这四个值之一，就像给抽屉贴标签分类
type DateFormat = 'date' | 'month' | 'year' | 'datetime'; 

// 响应式变量定义（可以理解为带状态的盒子，数据变化时UI会自动更新）
// 当前选中的日期格式，默认是'date'（年月日）
const currentFormat = ref<DateFormat>('date'); 
// 开始日期值（双向绑定到输入框）
const startDate = ref(''); 
// 结束日期值（双向绑定到输入框）
const endDate = ref(''); 
// 日期选择器的起始年份
const startYear = ref(''); 
// 日期选择器的结束年份
const endYear = ref(''); 

// 修复1：使用计算属性动态生成选择器模式
// 计算属性就像自动售货机，投入不同的钱（currentFormat）会出来不同的商品（返回值）
const pickerMode = computed(() => { 
  // 如果是datetime格式，使用'time'模式，否则都用'date'模式
  return currentFormat.value === 'datetime' ? 'time' : 'date'; 
}); 

// 修复2：修正fields属性值（控制选择器显示的精度）
// 相当于调整尺子的刻度，不同格式需要显示不同的刻度精度
const fields = computed(() => { 
  switch(currentFormat.value) { 
    case 'year': return 'year';      // 只显示年份选择
    case 'month': return 'month';    // 显示到月份选择
    case 'date': return 'day';       // 显示到日期选择
    case 'datetime': return 'minute'; // 显示到分钟（uni-app的time模式不支持second）
    default: return 'day'; 
  } 
}); 

// 组件挂载时执行（相当于商品上架前的准备工作）
onMounted(() => { 
  // 获取当前年份，设置选择器的年份范围（前后10年）
  const currentYear = new Date().getFullYear(); 
  startYear.value = (currentYear - 10).toString(); 
  endYear.value = (currentYear + 10).toString(); 
}); 

// 切换日期格式的方法（用户点击不同按钮时调用）
const changeFormat = (format: DateFormat) => { 
  currentFormat.value = format; 
}; 

// 修复3：正确处理datetime格式的返回值
// 处理选择器变化事件，相当于快递员接收包裹并分类（start或end）
const handlePickerChange = (e: any, type: 'start' | 'end') => { 
  let value = e.detail.value; 
  
  // 处理datetime格式的特殊返回值（time模式返回的是数组）
  if (currentFormat.value === 'datetime') { 
    // 如果是数组格式（[日期字符串, 时间字符串]），合并成一个字符串
    if (Array.isArray(value)) { 
      value = value[0] + ' ' + value[1]; 
    } 
  } 
  
  // 根据类型（start/end）将值存入对应的响应式变量
  if (type === 'start') { 
    startDate.value = formatDate(value); 
  } else { 
    endDate.value = formatDate(value); 
  } 
}; 

// 格式化日期显示（相当于给不同商品贴不同标签）
const formatDate = (value: string | string[]): string => { 
  // 如果是数组，先合并成字符串
  if (Array.isArray(value)) { 
    value = value.join(' '); 
  } 
  
  const strValue = value.toString(); 
  
  // 根据当前格式截取不同长度的字符串
  switch(currentFormat.value) { 
    case 'date': return strValue.split(' ')[0]; // 只取日期部分
    case 'month': return strValue.substring(0, 7); // 取前7个字符（YYYY-MM）
    case 'year': return strValue.substring(0, 4); // 取前4个字符（YYYY）
    case 'datetime': 
      // 确保日期时间格式正确
      if (strValue.includes(':')) { 
        return strValue; 
      } 
      // 处理可能的数组格式
      return strValue.replace(',', ' '); 
    default: return strValue; 
  } 
}; 
</script>

<style scoped>
/* 容器样式 */
.date-picker-container {
  padding: 20rpx;
}

/* 日期格式按钮组样式 */
.date-format-buttons {
  display: flex;
  gap: 10rpx;
  margin-bottom: 20rpx;
}

/* 按钮样式 */
.date-format-buttons button {
  flex: 1;
  padding: 15rpx 0;
  background-color: #f5f5f5;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}

/* 激活状态按钮样式 */
.date-format-buttons button.active {
  background-color: #007aff;
  color: white;
}

/* 日期范围选择区域样式 */
.date-range-picker {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

/* 输入框样式 */
.date-range-picker uni-easyinput {
  flex: 1;
}

/* 分隔符样式 */
.range-separator {
  font-size: 32rpx;
  color: #666;
}
</style>